<template>
    <div class="home">
        <!-- 推荐模块 -->
        <section ref='wrapper' v-if="selectedId == 0" id="wrapper">
            <van-loading v-if="loading1" style="text-align:center">{{ loading1 ? '释放刷新' :'加载完毕'}}</van-loading>
            <div>
                <div v-for='(item,index) in newData' :key='index'>
                    <Swiper v-if='item.type=="swiperList"' :swiperList='item.data'></Swiper>

                    <Icons v-if='item.type=="iconsList"' :iconsList='item.data'></Icons>

                    <Recommend v-if='item.type=="recommendList"' :recommendList='item.data'></Recommend>

                    <Ad v-if='item.type=="adList"' :adList='item.data'></Ad>
                </div>
                <div class='like'>
                    <Card>
                        <span>猜你喜欢</span>
                    </Card>
                    <ul>
                        <li v-for='(item,index) in likeList' :key='index' @click='goDetail(item.id)'>
                            <h2>
                                <img v-lazy="item.imgUrl" alt="">
                            </h2>
                            <div class="goodsName">
                                <div v-if="item.title">{{item.title}}</div>
                                <h3>{{item.name}}</h3>
                            </div>
                            <div class="price">
                                <div class="left">
                                    <span>¥</span>
                                    <b>{{item.price}}</b>
                                </div>
                                <span class="right" v-if="item.jin">{{item.jin}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <van-loading color="#1989fa" class="loading" v-if="showLoading " size="30px">加载中...</van-loading>
                <!-- 数据加载完毕的时 -->
                <div v-if="hasData" class="hasData">
                    数据加载完毕
                </div>
                <!-- 占位符 -->
                <div class="divide">
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import Header from '@/components/home/Header.vue'
import Swiper from '@/components/Swiper.vue'
import Icons from '@/components/home/Icons.vue'
import Recommend from '@/components/home/Recommend.vue'
import Like1 from '@/components/home/Like1.vue'
import Ad from '@/components/home/Ad.vue'
import Tabbar from '@/components/common/Tabbar.vue'
//引入插件
import BetterScroll from 'better-scroll'
import Card from '@/components/home/Card.vue'
import { getLikeList, getIndexList } from '@/common/api/index.js'
import { Toast } from 'vant'
import Vue from 'vue'
Vue.use(Toast)
export default {
    name: "Home",
    data () {
        return {
            selectedId: 0,
            newData: [],
            oBetterScroll: '',
            likeList: [],
            // 上拉加载是否显示加载中
            showLoading: false,
            hasData: false,
            isLoading: false,
            loading1: false,
            pageIndex: 1
        }
    },
    components: {
        Header,
        Swiper,
        Icons,
        Recommend,
        Like1,
        Ad,
        Tabbar,
        Card,
    },
    activated () {
        this.scrollTo()
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            getLikeList(this.pageIndex).then((res1) => {
                this.likeList = res1.data
                this.pageIndex++
                getIndexList().then(res => {
                    console.log(res);
                    this.newData = Object.freeze(res.data);
                    this.$nextTick(() => {
                        this.scrollTo()
                    })
                })
            })
            //当dom都加载完毕了再去执行
        },
        goDetail (id) {
            this.$router.push({
                path: '/detail',
                query: {
                    id
                }
            })
        },
        scrollTo () {
            if (!this.oBetterScroll) {
                this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
                    movable: true,
                    // zoom: true,
                    // click: true,
                    probeType: 3,
                    scrollbar: {
                        fade: true,
                        interactive: true
                    },
                    pullUpLoad: {
                        threshold: 120
                    },
                    pullDownRefresh: {
                        threshold: 5,
                        stop: 10
                    },
                })

                const refresh = () => {
                    getLikeList(this.pageIndex++).then(res => {
                        if (res.message) {
                            this.hasData = true
                            this.oBetterScroll && this.oBetterScroll.finishPullUp();
                        } else {
                            this.likeList = [...this.likeList, ...res.data]
                            console.log(this.likeList);
                            setTimeout(() => {
                                this.$nextTick(() => {
                                    this.oBetterScroll.refresh()
                                    this.oBetterScroll.finishPullUp();
                                })
                            }, 100)
                        }
                    }).finally(() => {
                        this.showLoading = false
                    })
                }
                // 节流防止多次刷新
                function thro (func, wait) {
                    let timeOut;
                    return function () {
                        if (!timeOut) {
                            timeOut = setTimeout(function () {
                                func();
                                timeOut = null;
                            }, wait);
                        }
                    };
                }
                const method = thro(refresh, 1000)
                this.oBetterScroll.on('pullingUp', () => {
                    setTimeout(() => {
                        this.showLoading = true
                    }, 10)
                    method()
                })

                this.oBetterScroll.on('pullingDown', () => {
                    this.hasData = false
                    if (!this.loading1) {
                        this.loading1 = true
                        setTimeout(() => {
                            this.pageIndex = 1
                            this.getData()
                            this.loading1 = false
                            this.oBetterScroll.finishPullDown()
                            Toast('刷新成功')
                        }, 200)
                    }
                })

            } else {
                this.oBetterScroll.refresh()
            }
        }
    }
};
</script>

<style scoped>
section {
    flex: 1;
    overflow: hidden;
}
::v-deep .ly-tabbar {
    box-shadow: none;
    border-bottom: none;
}
.like ul {
    display: flex;
    flex-wrap: wrap;
    background: #f0f0f0;
}
.like ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 49%;
    background: #ffffff;
}
.like ul li:nth-child(odd) {
    margin-top: 0.1333rem;
    margin-left: 0.0533rem;
}
.like ul li:nth-child(even) {
    margin-top: 0.1333rem;
    margin-left: 0.1333rem;
}
.like h3 {
    padding: 0 0.16rem;
    width: 93%;
    font-size: 0.373333rem;
    font-weight: 400;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.like ul li > div {
    width: 93%;
    padding: 0.16rem;
    text-align: left;
    color: #c3625d;
}
.price {
    display: flex;
    justify-content: space-between;
}
.right {
    height: 0.4267rem;
    margin-left: 0.2667rem;
    margin-top: 0.08rem;
    border: 1px solid #ffd580;
    line-height: 0.4267rem;
    background: #ffffe5;
    padding: 0.0267rem;
    font-size: 0.32rem;
    color: #b0352f;
}

.like ul li > div span {
    font-size: 0.32rem;
}
.like ul li > div b {
    font-weight: 600;
    font-size: 0.426666rem;
}
.like img {
    width: 4.693333rem;
    height: 4.693333rem;
}
.like img[lazy="loading"] {
    background-color: #f7f7f7;
}

.loading {
    padding-top: 0.2133rem;
    height: 0.5333rem;
    text-align: center;
    background: #f0f0f0;
}

.hasData {
    padding-top: 0.2133rem;
    color: #b3b4b5;
    background: #f0f0f0;
    font-size: 0.4267rem;
    height: 0.1333rem;
    text-align: center;
}

.divide {
    height: 5.3333rem;
    background: #f0f0f0;
}

.goodsName {
    display: flex;
    align-items: center;
}
.goodsName div {
    height: 0.4267rem;
    width: 2.1333rem;
    padding: 0.0533rem;
    line-height: 0.4267rem;
    font-size: 0.32rem;
    color: #fff;
    margin-right: 0.1333rem;
    background: #b0352f;
    border-radius: 0.0533rem;
}
</style>